<template>
  <div>
    <h3>vuex设置</h3>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increment Count</button>
    <button @click="incrementAsync">Increment Count Async</button>
    <button @click="updateMessage('新消息')">Update Message</button>
  </div>
</template>
<script setup>
import { computed } from "vue";
import store from "@/store"; // 假设 store.js 和这个组件在同一目录下

const count = computed(() => store.state.count);
const doubleCount = computed(() => store.getters.doubleCount);
const message = computed(() => store.state.message);

const increment = () => {
  store.commit("increment");
};

const incrementAsync = () => {
  store.dispatch("incrementAsync");
};

const updateMessage = (newMessage) => {
  store.dispatch("updateMessage", newMessage);
};
</script>
